<template>
	<view class="container">
		<view class="ul">
			<view class="li">
				<view class="top">
					<view class="l">
						提现1元
					</view>
					<view class="r">
						-1
					</view>
				</view>
				<view class="bot">
					<view class="l">
						2020/12/04 11:22
					</view>
					<view class="r">
						已到账
					</view>
				</view>
			</view>
			<view class="li">
				<view class="top">
					<view class="l">
						提现1元
					</view>
					<view class="r">
						-1
					</view>
				</view>
				<view class="bot">
					<view class="l">
						2020/12/04 11:22
					</view>
					<view class="r">
						已到账
					</view>
				</view>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				loadding: false,
				pullUpOn: true,
			}
		},
		onReady() {},
		methods: {},
		onPullDownRefresh: function() {
			//延时为了看效果
			setTimeout(() => {
				this.newsList = this.loadData;
				this.pageIndex = 1;
				this.pullUpOn = true;
				this.loadding = false;
				uni.stopPullDownRefresh();
				this.tui.toast("刷新成功");
			}, 200)
		},
		
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == 3) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.newsList = this.newsList.concat(this.loadData);
				this.pageIndex = this.pageIndex + 1;
			}
		}
	}
</script>
<style>
	page {
		background: #f0f0f0;
	}
</style>
<style scoped lang="scss">
	.container {
		.ul {
			.li {
				padding: 30rpx;
				background: #fff;
				border-bottom: 1rpx solid #eee;
				&:last-child {
					border:none
				}
				.top {
					display: flex;
					-webkit-box-pack: justify;
					-webkit-justify-content: space-between;
					-ms-flex-pack: justify;
					justify-content: space-between;
					margin-bottom: 30rpx;
					.l {
						font-size: 26rpx;
						color: #000;
					}
					.r {
						font-size: 26rpx;
						color: #000;
					}
				}
				.bot {
					display: flex;
					-webkit-box-pack: justify;
					-webkit-justify-content: space-between;
					-ms-flex-pack: justify;
					justify-content: space-between;
					.l {
						font-size: 24rpx;
						color: #747474;
					}
					.r {
						font-size: 24rpx;
						color: #747474;
					}
				}
			}
		}
	}
</style>
